<template>
	<!-- 通用英文版查询 -->
	<view class="main" v-show="isShowPage">
		<view class="second">
			<image src="https://app.asy315.vip/s/m/images/query_img_en.png" mode="widthFix" style="width: 100%;" @click="toAsy"></image>
			<view class="inputView">
				<u-form :model="form" ref="uForm" rules="rules" class="form">
					<u-form-item label=" " prop="code" label-width="0">
						<u-input v-model="form.code" :clearable="false" placeholder="input the security code"
							class="input" type="number" :border="true" border-color="#d0d0d0" height="60" />
						<image @click="search" src="https://app.asy315.vip/s/m/images/search.png" mode="widthFix" class="search"
							style="width: 30rpx;"></image>
					</u-form-item>
				</u-form>
				<!-- 			<u-button :custom-style="queryBtn" @click="search">
					<u-icon name="search"></u-icon>
				</u-button> -->
				<!-- <image src="https://app.asy315.vip/s/m/images/scan.png" mode="widthFix" style="width: 60rpx;"></image> -->
			</view>
		</view>
		<view class="third">
			<view class="content" v-if="info.code.length>0">
				<view>
					<view class="imgView">
						<image :src="imgSrc" mode="widthFix" :style="{'width': (imgWidth ? '100%':'50%')}"
							@click="preview"></image>
					</view>
					<view class="infoView">
						<view class="info" v-if="info.customer.name">
							<view class="left">COMPANY</view>
							<view class="right">{{info.customer.name}}</view>
						</view>
						<view class="info" v-if="info.customer.phone">
							<view class="left">TELEPHONE</view>
							<view class="right">
								<a style="color: rgb(41, 121, 255);text-decoration: none;"
									:href="'tel:' + info.customer.phone">{{info.customer.phone}}</a>
							</view>
						</view>
						<view class="info">
							<view class="left">ANTI-CODE</view>
							<view class="right">
								<view class="info-line">
									<text v-for="(item,index) in info.code" :key="index"
										:class="item.class">{{item.value}}</text>
									<image v-if="isRight" src="https://app.asy315.vip/s/m/images/tick.png" mode="widthFix" class="check_icon">
									</image>
									<image v-else src="https://app.asy315.vip/s/m/images/cha.png" mode="widthFix" class="check_icon"></image>
								</view>
							</view>
						</view>
						<view class="info" v-if="info.customer.website">
							<view class="left">WEBSITE</view>
							<view class="right">
								<u-link :href="info.customer.website">{{info.customer.website}}</u-link>
							</view>
						</view>
						<view class="info" v-for="(item,index) in extraInfo" :key="index">
							<view class="left">{{item.key}}</view>
							<view class="right">{{item.value}}</view>
						</view>
						<view class="info">
							<view class="left">QUERIED TIME</view>
							<view class="right" v-if="info.label.id">
								<view>{{info.firstTime}}</view>
								<view>First check</view>
							</view>
							<view class="right" v-else>
								The anti-fake code you queried is not exist.
							</view>
						</view>
						<view class="info" v-if="info.label.queryTimes" @click="isShowQueryTimes=!isShowQueryTimes">
							<view class="left">TIMES OF QUERIES</view>
							<view class="right" v-if="isRight">
								<view>{{info.label.queryTimes}}</view>
								<view style="margin-top: 30rpx;" v-show="isShowQueryTimes">
									<view v-if="info.label.queryTimes>1">
										The anti-fake code you queried is correct,it has been queried
										<text style="color: #1e9fff;margin: 0 10rpx;">{{info.label.queryTimes}}</text>
										times. First queried time is <text
											style="color: #1e9fff;margin: 0 10rpx;">{{info.firstTime}}.</text>
										Please note that this anti-fake code has been queried many times, beware of
										imitations!
										For more security identification, please download<u-link :href="appUrl"
											style="margin-left: 10rpx;">ASYun</u-link>
									</view>
									<view v-else>
										The current query is the first query, query time: <text
											style="color: #1e9fff;margin: 0 10rpx;">{{info.firstTime}}.</text>
										For more security identification, please download<u-link :href="appUrl"
											style="margin-left: 10rpx;">ASYun</u-link>
									</view>
								</view>
							</view>
							<view class="right" style="color: #ff2d2d;" v-else>
								The security code is invalid, beware of counterfeit!
							</view>
						</view>
						<view class="info" v-if="isShowCheck" @click="isShowCheckCode=!isShowCheckCode">
							<view class="left">CHECK CODE</view>
							<view class="right">
								<view class="info-line">
									<text v-for="(item,index) in checkCode" :key="index"
										:class="item.class">{{item.value}}</text>
									<image v-if="isRight" src="https://app.asy315.vip/s/m/images/tick.png" mode="widthFix" class="check_icon">
									</image>
									<image v-else src="https://app.asy315.vip/s/m/images/cha.png" mode="widthFix" class="check_icon"></image>
								</view>
								<view style="margin-top: 30rpx;" v-show="isShowCheckCode">
									{{info.checkCode}}
								</view>
							</view>
						</view>
						<view class="tips" v-if="isShowChekFlag&&isRight">
							<view class="right">
								The security codes displayed on this page corresponds to the real security
								codes.Download“<u-link :href="appUrl" style="margin-left: 10rpx;">ASYun</u-link>
								”app get more information.</view>
						</view>
						<view class="videoView" v-if="videoSrc">
							<video :src="videoSrc" controls :autoplay="true"></video>
						</view>
					</view>
				</view>
				<!-- 				<view v-else>
					Please input the security code or click the scan key to verify the security
				</view> -->
			</view>
		</view>
		<view class="fourth">
			<image src="https://app.asy315.vip/s/m/images/download_en.png" mode="widthFix" style="width: 100%;" @click="download"></image>
			<view class="sw_view" v-if="sw_list.length>0&&sw_list.length!=1">
				<u-swiper :list="sw_list" duration="500" height="1300" img-mode="aspectFit"></u-swiper>
			</view>
			<image v-else :src="sw_list[0].image" mode="widthFix" style="width: 100%;margin-top: 40rpx;"></image>
		</view>
		<view class="fifth">
			<view class="title">
				<view class="left">ABOUT ASY</view>
			</view>
			<view class="infoView">
				<view class="qr">
					<image src="https://app.asy315.vip/s/m/images/qr.png" mode="widthFix" style="width: 200rpx;"></image>
				</view>
				<view class="item">ASY Anti-counterfeiting co. ltd</view>
				<view class="item">Email： <a style="color: rgb(41, 121, 255);text-decoration: none;"
						href="mailto:asy315@asy315.com">asy315@asy315.com</a></view>
				<view class="item">TEL：
					<a style="color: rgb(41, 121, 255);text-decoration: none;" href="tel:+86 15989366075">+86
						15989366075</a>
				</view>
				<view class="item">1205,Block B,Zhongdian Great Wall Building,No.3 Kefa Road,Yuehai Street,Nanshan
					District,Shenzhen,Gunagdong,China</view>
			</view>
		</view>
		<view class="footer">
			ICP备案编号：粤ICP备18119196号-1
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import toBaiduloglat from "@/common/translation.js"
	export default {
		data() {
			return {
				form: {
					code: ''
				},
				rules: {
					code: [{
						required: true,
						message: 'Please enter the security code',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
				},
				queryBtn: {
					backgroundColor: "#086B8B",
					color: "#fff",
					width: "64rpx",
					height: "64rpx",
					padding: "0",
					margin: "0 10rpx"
				},
				imgSrc: "",
				imgSrc1: [],
				info: {
					checkCode: "",
					customer: {
						name: "",
						phone: "",
						website: ""
					},
					label: {
						id: 0,
						queryTimes: "",
						firstTime: "",
						code: ""
					},
					code: [],
				},
				extraInfo: [],
				appUrl: "",
				sw_list: [{
					image: ""
				}],
				formData: {
					code: "",
					ip: "",
					city: "",
					longitude: "",
					latitude: "",
					deviceInfo: "",
					querySource: "applet",
					mapType: 0
				},
				videoSrc: "",
				isShowChekFlag: false,
				isRight: false,
				checkCode: "",
				imgWidth: false,
				isShowQueryTimes: false,
				isShowCheck: true,
				isShowCheckCode: false,
				isShowPage: false,
				flag:''
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			if (option.q) {
				let url = decodeURIComponent(option.q)
				let str = this.getUrlCode('c', url)
				let pattern = /^\d+$/; // 匹配由一或多个数字组成的字符串
				if (pattern.test(str)) {
				  this.form.code = str
				  setTimeout(() => {
				  	this.search()
				  }, 500)
				}
			} else if (option.c){
				this.form.code = option.c
				if (this.form.code) {
					setTimeout(() => {
						this.search()
					}, 500)
				}
			}
		},
		methods: {
			// 获取图片信息
			getImgInfo() {
				uni.getImageInfo({
					src: this.imgSrc,
					success: (image) => {
						if (image.width >= 450) {
							this.imgWidth = true
						} else {
							this.imgWidth = false
						}
					}
				});
			},
			search() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading({
							mask: true,
							title: "requesting..."
						})
						this.$u.api.labelQuery1(this.form).then(res => {
							if (res.status == 200) {
								uni.hideLoading()
								this.labelInfo(res.data)
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			preview() {
				uni.previewImage({
					current: 0,
					urls: this.imgSrc1,
					success: () => {},
					fail: () => {}
				});
			},
			labelInfo(res) {
				this.info.code = [];
				this.imgSrc1 = [];
				if (res.label.id == 0) {
					this.isRight = false
					this.info.label.id = res.label.id
					this.info.customer.name = "Can't find it"
					this.info.label.queryTimes = '';
					this.sw_list = [{
						image: ""
					}];
					this.videoSrc = ''
					this.isShowChekFlag = false;
					this.imgSrc = this.$u.http.config.baseUrl + '/' + res.batchImage
					this.imgSrc1.push(this.imgSrc)
					this.info.checkCode = ''
					let codeNum = this.form.code.split('')
					for (let i = 0; i <= codeNum.length; i++) {
						let obj = {
							value: codeNum[i],
							class: ""
						}
						this.info.code.push(obj)
					}
					let codeArr = this.$u.deepClone(this.info.code);
					for (let i = 0; i < codeArr.length; i++) {
						if (codeArr[i].class != "active") {
							codeArr[i].value = "x"
						}
					}
					this.checkCode = codeArr
					this.isShowPage = true
				} else {
					this.showPageInfo(res)
				}
				
			},
			showPageInfo(res){
				if (res.isInvalid == 'true') {
					this.isRight = false
				} else {
					this.isRight = true
				}
				this.info = res
				let code = []
				this.form.code = this.info.label.code
				let codeNum = this.info.label.code.split('').reverse()
				for (let i = 1; i <= codeNum.length; i++) {
					if (i == this.info.checkCodeValue) {
						let obj = {
							value: codeNum[i - 1],
							class: "active"
						}
						code.push(obj)
					} else {
						let obj = {
							value: codeNum[i - 1],
							class: ""
						}
						code.push(obj)
					}
				}
				this.info.code = code.reverse()
				if (this.info.checkCodeValue) {
					this.isShowCheck = true
					let codeArr = this.$u.deepClone(this.info.code);
					for (let i = 0; i < codeArr.length; i++) {
						if (codeArr[i].class != "active") {
							codeArr[i].value = "x"
						}
					}
					this.checkCode = codeArr
				} else {
					this.isShowCheck = false
				}
				if (this.info.checkImage) {
					if (this.info.checkImage.length > 100) {
						this.imgSrc = "data:image/png;base64," + this.info.checkImage
					} else {
						this.imgSrc = this.$u.http.config.baseUrl + this.info
							.checkImage
					}
				} else {
					this.imgSrc = this.$u.http.config.baseUrl + '/' + res
						.batchImage
				}
				this.imgSrc1.push(this.imgSrc)
				if (this.info.appUrl) {
					this.appUrl = this.$u.http.config.baseUrl + this.info.appUrl
				} else {
					this.appUrl = this.$u.http.config.baseUrl + '/open/app'
				}
				if (this.info.product.image2) {
					this.sw_list = []
					let imagArr = this.info.product.image2.split(',')
					imagArr.forEach(v => {
						let obj = {
							image: this.$u.http.config.baseUrl + v
						}
						this.sw_list.push(obj)
					})
				}
				if (this.info.product.antiVideo) {
					this.videoSrc = this.info.product.antiVideo
				} else {
					this.videoSrc = ''
				}
				if (this.info.checkFlag == "true") {
					this.isShowChekFlag = true
				} else {
					this.isShowChekFlag = false
				}
				this.extraInfo = []
				if ('extra' in this.info) {
					let info = JSON.parse(this.info.extra.content)
					for (let i in info) {
						let obj = {}
						if (info[i].key && info[i].value) {
							obj.key = info[i].key
							obj.value = info[i].value
							this.extraInfo.push(obj)
						}
					}
					// this.extraInfo = JSON.parse(this.info.extra.content)
				} else {
					this.extraInfo = []
				}
				this.getImgInfo()
				this.getLocation()
				this.isShowPage = true
			},
			// 获取用户位置
			getLocation() {
				this.$location.location().then(res => {
					console.log(res);
					this.formData.longitude = res.longitude
					this.formData.latitude = res.latitude
					this.formData.ip = res.ip
					this.formData.city = res.city
					this.formData.deviceInfo = res.deviceInfo
					this.postUserLocation()
				}).catch(e => {
					this.formData.longitude = e.longitude
					this.formData.latitude = e.latitude
					this.formData.ip = e.ip
					this.formData.city = e.city
					this.formData.deviceInfo = e.deviceInfo
					this.postUserLocation()
				})
			},
			// 提交用户位置信息
			postUserLocation() {
				this.formData.code = this.form.code
				this.$postlocation.postLocation(this.formData)
			},
			getUrlCode: function(name, url) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [,
					''])[1].replace(/\+/g, '%20')) || null
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f5f5f5;
		min-height: 100vh;

		.first {
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		@media screen and (min-width: 480px) {
			.second {
				height: 780rpx !important;
			}
		}

		.second {
			height: 480rpx;
			background-image: url(https://app.asy315.vip/s/m/images/bg.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: 0 -10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 100rpx;

			.query_img_b {
				margin: 14rpx 0 27rpx 0;
			}

			.inputView {
				width: 100%;
				display: flex;
				margin-top: 30rpx;

				.form {
					flex: 1;

					.u-form-item {
						padding: 0;
					}

					.input {
						background-color: #fff;
						width: 100%;

						/deep/ .u-input {
							background-color: #fff;
						}
					}

					.search {
						position: absolute !important;
						/*  #ifdef MP-WEIXIN */
						top: 36rpx;
						/*  #endif  */
						right: 20rpx;
						z-index: 9999;
					}
				}
			}
		}

		.third {
			padding: 0 30rpx;
			margin-top: -60rpx;

			.content {
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 30rpx;
				box-shadow: 0px 4rpx 24rpx 0px rgba(0, 0, 0, .2);

				.imgView {
					text-align: center;
					margin-bottom: 80rpx;
				}

				.infoView {
					.info {
						display: flex;
						margin-bottom: 30rpx;
						padding-bottom: 30rpx;
						border-bottom: 1px dashed #636363;

						.left {
							margin-right: 20rpx;
							font-size: 26rpx;
							color: #000;
							font-weight: bold;
							flex: 0.5;
						}

						.right {
							flex: 1;
							// font-weight: bold;
							text-align: right;
							padding-right: 30rpx;

							.active {
								background-color: #000;
								color: #fff;
								font-weight: bold;
							}

							.check_icon {
								width: 40rpx;
								margin-left: 20rpx;
							}
						}

						.info-line {
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
					}

					.tips {
						padding: 20rpx 40rpx;
						text-align: center;
						color: #666;
					}

					.videoView {
						video {
							width: 100%;
							height: 300rpx;
						}
					}
				}
			}
		}

		.fourth {
			padding: 60rpx 30rpx;

			.sw_view {
				background: #FFFFFF;
				box-shadow: 0px 13px 25px 11px rgba(0, 0, 0, 0.11);
				border-radius: 30px;
				margin-top: 60rpx;
			}
		}

		.fifth {
			padding: 0 30rpx;
			text-align: center;

			.title {
				margin: 40rpx;
				font-weight: bold;
			}

			.infoView {

				.qr {
					margin-bottom: 30rpx;
				}

				.item {
					margin-bottom: 18rpx;
					color: #666;
				}
			}
		}

		.footer {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #333;
			padding: 30rpx;
			color: #fff;
			width: 100%;
		}
	}
</style>
